<template>
  <div class="bf-form-orgtree">
    <el-input
      placeholder="输入关键字进行过滤"
      v-model="filterText">
    </el-input>
    <el-tree
      @node-click="nodeClickEmit"
      :data="treeData"
      :props="props"
      node-key="id"
      :check-strictly='checkStrictly'
      :show-checkbox="showCheckbox"
      @check="check"
      :default-expanded-keys="expandedData"
      :filter-node-method="filterNode"
      :default-checked-keys="showCheckedId"
      ref="userOrgTreeRef"
    >
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <span :class="data.isEmployee == '1'?'is-user-node color':'is-user-node'"><i v-if="data.isEmployee == '1'" class="fas fa-male"></i><span :title="node.label">{{ node.label }}</span></span>
      </span>
    </el-tree>
  </div>
</template>

<script>
import { getOrgTree, getUserTree } from '../api/common.js'
export default {
  // defaultExpandAll: 默认展开全部
  // userOrg 是否展示用户树：true 展示用户树
  // showCheckbox 是否展示复选框： true 展示
  // checkStrictly 所有层级可选，不遵循依赖关系
  // 数据回显,字符串回显,showChecked = 0,101,10101,1010101,1010102,1010199,10102,1010201,1010202,11411,234243,10199,2323233,901,90101,9010101,
  props: ['defaultExpandAll', 'userOrg', 'showCheckbox', 'checkStrictly', 'showChecked'],
  data() {
    return {
      checkedData: [],
      searchData: '',
      filterText: '',
      treeData: [],
      expandedData: [],
      showCheckedId: [],
      props: {
        label: 'text',
        children: 'children'
      }
    }
  },
  mounted: function() {
    this.getOrgTree()
  },
  methods: {
    check(data, checked) {
      this.checkedData = checked
      this.$emit('checkChange', data, checked)
    },
    getOrgTree() {
      if (this.userOrg) {
        getUserTree().then((response) => {
          this.treeData = response.data
          this.treeData.forEach((v) => {
            this.expandedData.push(v.id)
            if (v.children) {
              v.children.forEach((w) => {
                this.expandedData.push(w.id)
              })
            }
          })
        })
      } else {
        getOrgTree().then((response) => {
          this.treeData = response.data
          this.treeData.forEach((v) => {
            this.expandedData.push(v.id)
            if (v.children) {
              v.children.forEach((w) => {
                this.expandedData.push(w.id)
              })
            }
          })
        })
      }
    },
    nodeClickEmit(a, b, c) {
      this.$emit('nodeClick', a, b, c)
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.text.indexOf(value) !== -1;
    }
  },
  watch: {
    filterText(val) {
      this.$refs.userOrgTreeRef.filter(val);
    },
    showChecked(val) {
      if (val) {
        if (val.forEach) {
          this.showCheckedId = val
        } else {
          let tmpArr = val.split(',')
          this.showCheckedId = tmpArr
          this.getOrgTree()
        }
      }
    }
  }
}
</script>


<style scoped>
.is-user-node .fa-male{
  padding-right: 4px;
}
</style>
